<template>
  <div class="choiceArticleManage">
    <!--查询 -->
    <div class="text1">
      精选文章标题:<input type="text" v-model="title" style="height: 36px">
      <el-button type="primary" @click="select">搜索</el-button>
    </div>
    <div style="padding-top: 10px">
      <el-button type="primary" @click="dialogFormVisible1 = true">新增精选文章</el-button>
      <!-- <el-button type="primary" @click="dialogFormVisible2 = true" style="background-color: red;">批量删除</el-button> -->
    </div>
    <!--新增精选文章弹框-->
    <div>
      <el-dialog title="新增精选文章" :visible.sync="dialogFormVisible1">
        <el-form :model="form">
          <el-form-item label="文章id" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off" placeholder="不写id将自动增长"></el-input>
          </el-form-item>
          <el-form-item label="文章标题" :label-width="formLabelWidth">
            <el-input v-model="form.articlename" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="文章简介" :label-width="formLabelWidth">
            <el-input v-model="form.articleintroduce" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="文章图片" :label-width="formLabelWidth">
            <el-upload name="file" action="http://localhost:8080/article/upload" list-type="picture-card"
              :auto-upload="true" :on-success="uploadImg">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                    <i class="el-icon-download"></i>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="文章详情" :label-width="formLabelWidth">
            <el-input v-model="form.details" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="阅读量" :label-width="formLabelWidth">
            <el-input v-model="form.readquantity" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="收藏量" :label-width="formLabelWidth">
            <el-input v-model="form.collects" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item label="时间" :label-width="formLabelWidth">
            <el-input v-model="form.createtime" autocomplete="off"></el-input>
          </el-form-item>    -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 删除弹框 -->
    <div>
      <el-dialog title="是否批量删除" :visible.sync="dialogFormVisible2">
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="batchDel">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 修改弹框 -->
    <div>
      <el-dialog title="修改文章" :visible.sync="dialogFormVisible3">
        <el-form :model="form">
          <el-form-item label="文章标题" :label-width="formLabelWidth">
            <el-input v-model="form.articlename" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="文章简介" :label-width="formLabelWidth">
            <el-input v-model="form.articleintroduce" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="文章详情" :label-width="formLabelWidth">
            <el-input v-model="form.details" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="updateById">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 主页面表格 -->
    <el-table :data="tableData" border style="width: 100%" color:black
      :header-cell-style="{ 'background-color': '#409EFF', color: '#fff' }">
      <el-table-column fixed prop="id" label="文章id" width="80">
      </el-table-column>
      <el-table-column prop="articlename" label="文章标题" width="150">
      </el-table-column>
      <el-table-column prop="articleintroduce" label="文章简介" width="150">
      </el-table-column>
      <el-table-column prop="tabularchart" label="文章图片" width="150">
        <template slot-scope="scope">
          <!-- 假设每行数据有一个名为 'imageUrl' 的字段，存储图片的 URL -->
          <img :src="scope.row.tabularchart" style="width: 100%; height: 150px;">
        </template>
      </el-table-column>
      <el-table-column prop="details" label="文章详情" width="150">
      </el-table-column>
      <el-table-column prop="readquantity" label="阅读量" width="150">
      </el-table-column>
      <el-table-column prop="collects" label="收藏量" width="150">
      </el-table-column>
      <el-table-column prop="createtime" label="时间" width="120">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="medium" @click="dialogFormVisible3 = true, getId(scope.row)">修改</el-button>
          <el-button type="text" size="medium" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>

</template>
<script>
import { Upload } from 'element-ui';
import { del } from 'vue';

export default {
  name: "ChoiceArticle",
  data() {
    return {
      title: "亲子沟通的艺术",
      form: {
        id: "",
        articlename: "亲子沟通的艺术",
        articleintroduce: "建立和谐家庭关系",
        img: "",
        details: "良好的亲子沟通是建立和谐家庭关系的基础。本文将介绍几种有效的亲子沟通方法...",
        readquantity: "20000",
        collects: "1111",
        createtime: ""
      },
      dialogFormVisible1: false,//新增
      dialogFormVisible2: false,//删除
      dialogFormVisible3: false,//修改
      tableData: [],
      total: 0,//总数
      pageNum: 1,//待查询的页码,默认显示第1页
      pageSize: 5,//每页显示的条目数，默认显示2个条目数
      pageSizes: [2, 5, 10, 20],//每页显示个数选择器的选项设置
      formLabelWidth: '100px',
      // 图片上传
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  //默认请求全部文章内容
  created() {
    this.getArticleList(this.pageNum, this.pageSize);
  },

  methods: {
    // 查询全部
    getArticleList(pageNum1, pageSize1) {
      this.axios.request("/article/findAll", { params: { pageNum1, pageSize1 } })
        .then((res) => {
          this.tableData = res.data.articleList;
          this.total = res.data.total;
        }).catch((err) => {
          console.log("错误  查询全部=============---------");
        })
    },
    // 切换条目数
    handleSizeChange(val) {
      this.pageSize=val
      this.getArticleList(this.pageNum, val);
    },
    // 切换页数
    handleCurrentChange(val) {
      this.pageNum=val;
      this.getArticleList(val,this.pageSize);
    },
    //根据文章标题模糊查询
    select() {
      this.axios.get("/article/findAllByTitle",
        {
          params: {
            title: this.title
          }
        }).then((res) => {
          this.tableData = res.data;
        }).catch((err) => {
          console.log("错误  根据文章标题模糊查询=========-------");
        })
    },
    // 添加
    add() {
      this.dialogFormVisible1 = false;//新增弹窗消失
      this.axios.get("/article/add", {
        params: {
          id: this.form.id,
          articlename: this.form.articlename,
          articleintroduce: this.form.articleintroduce,
          tabularchart: this.form.img,
          details: this.form.details,
          readquantity: this.form.readquantity,
          collects: this.form.collects,
          // createtime:this.form.createtime,
        }
      }).then((res) => {
        if (res.data >0) {
          this.$message({
            showClose: true,
            message: "添加成功",
            type: 'success'
          });
        }
      }).catch((err) => {
        console.log("添加失败============-----------");
      });
      this.getArticleList(this.pageNum1, this.pageSize1) ;
    },
    // 批量删除
    batchDel() {
      this.dialogFormVisible2 = false;
    },
    // 根据id删除一个
    del(row) {
      this.axios.delete("/article/delById", {
        params: { id: row.id }
      }).then((res) => {
        if (res.data == 1) {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: 'success'
          });
        }
      }).catch((err) => {
        console.log("删除失败=========---------");
      });
      this.getArticleList(this.pageNum1, this.pageSize1);
    },
    // 图片上传
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(file);
    },
    handleDownload(file) {
      console.log(file);
    },
    uploadImg(res) {
      console.log(res.data);
      this.form.img = res.data
    },
    // 修改
    getId(row) {
      // 得到id
      this.form.id = row.id;;
      this.axios.get("/article/findById",{params:{
        id:this.form.id
      }}).then((res)=>{
        console.log(res); 
        this.form.articlename=res.data.articlename;
        this.form.articleintroduce=res.data.articleintroduce;
        this.form.details=res.data.details;
      }).catch((err)=>{
        console.log("根据id内容显示到前端错误=====-------");
      })
    },
    updateById() {
      this.dialogFormVisible3 = false;
       this.axios.request("/article/updateById",{params:{
        id:this.form.id,
        articlename:this.form.articlename,
        articleintroduce:this.form.articleintroduce,
        details:this.form.details
       }}).then((res)=>{
        if (res.data >0) {
          this.$message({
            showClose: true,
            message: "修改成功",
            type: 'success'
          });
        } 
       }).catch((err) => {
        console.log("修改失败============-----------");
      });
      this.getArticleList(this.pageNum1, this.pageSize1) 
    }


  }
}
</script>